<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-table">
        <el-table :key="itemkey" :data="tabledatas" size="mini">
          <el-table-column label="序号" width="70px">
            <template slot-scope="scope">
              <span>{{ scope.row.sequence }}</span>
            </template>
          </el-table-column>
          <el-table-column label="编码" width="70px">
            <template slot-scope="scope">
              <span>{{ scope.row.extColumn }}</span>
            </template>
          </el-table-column>
          <el-table-column label="名称" width="140px">
            <template slot-scope="scope">
              <el-input v-show="!scope.row.show" v-model.trim="scope.row.name" size="mini" />
              <span v-show="scope.row.show && scope.row.id != null">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数据类型">
            <template slot-scope="scope">
              <el-select v-show="!scope.row.show" ref="scope.row.dataType" v-model="scope.row.dataType" size="mini" clearable placeholder="请选择">
                <el-option v-for="item in dataTypes" :key="item.code" :label="item.text" :value="item.code" />
              </el-select>
              <el-select v-show="scope.row.show && scope.row.id != null" ref="scope.row.dataType" v-model="scope.row.dataType" size="mini" disabled clearable placeholder="请选择">
                <el-option v-for="item in dataTypes" :key="item.code" :label="item.text" :value="item.code" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="数据值域" width="160px">
            <template slot-scope="scope">
              <el-input v-show="!scope.row.show" v-model.trim="scope.row.dataValue" size="mini" />
              <span v-show="scope.row.show && scope.row.id != null">{{ scope.row.dataValue }}</span>
            </template>
          </el-table-column>
          <el-table-column label="正则校验" width="150px">
            <template slot-scope="scope">
              <el-input v-show="!scope.row.show" v-model.trim="scope.row.validateRule" size="mini" />
              <span v-show="scope.row.show && scope.row.id != null">{{ scope.row.validateRule }}</span>
            </template>
          </el-table-column>
          <el-table-column label="默认值" width="85px">
            <template slot-scope="scope">
              <el-input v-show="!scope.row.show" v-model.trim="scope.row.defaultValue" size="mini" />
              <span v-show="scope.row.show && scope.row.id != null">{{ scope.row.defaultValue }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否必填" width="80px">
            <template slot-scope="scope">
              <el-switch
                v-show="!scope.row.show"
                v-model="scope.row.required"
              />
              <el-switch
                v-show="scope.row.show && scope.row.id != null"
                v-model="scope.row.required"
                disabled
              />
            </template>
          </el-table-column>
          <el-table-column label="是否显示" width="80px">
            <template slot-scope="scope">
              <el-switch
                v-show="!scope.row.show"
                v-model="scope.row.showed"
              />
              <el-switch
                v-show="scope.row.show && scope.row.id != null"
                v-model="scope.row.showed"
                disabled
              />
            </template>
          </el-table-column>
          <el-table-column label="是否启用" width="80px">
            <template slot-scope="scope">
              <el-switch
                v-show="!scope.row.show"
                v-model="scope.row.status"
              />
              <el-switch
                v-show="scope.row.show && scope.row.id != null"
                v-model="scope.row.status"
                disabled
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="88px">
            <template slot-scope="scope">
              <el-button v-show="scope.row.show == false" type="primary" size="mini" icon="el-icon-check" @click="save(scope.row)">保存</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { findByDictionaryType } from '@neu/dcam-ui/api/dictionary'
import {
  list,
  update,
  create
} from '@neu/dcam-ui/api/assetExtFieldConfig'

export default {
  data() {
    return {
      dataTypes: [],
      connectorSelect: 'EMPTY',
      datas: [],
      itemkey: '',
      tabledatas: [
        { id: null, sequence: 1, index: '属性1', extColumn: 'ext1', name: '', required: false, showed: true,
          defaultValue: '', dataType: '', dataValue: '', validateRule: '', status: true, show: '' },
        { id: null, sequence: 2, index: '属性2', extColumn: 'ext2', name: '', required: false, showed: true,
          defaultValue: '', dataType: '', dataValue: '', validateRule: '', status: true, show: '' },
        { id: null, sequence: 3, index: '属性3', extColumn: 'ext3', name: '', required: false, showed: true,
          defaultValue: '', dataType: '', dataValue: '', validateRule: '', status: true, show: '' },
        { id: null, sequence: 4, index: '属性4', extColumn: 'ext4', name: '', required: false, showed: true,
          defaultValue: '', dataType: '', dataValue: '', validateRule: '', status: true, show: '' },
        { id: null, sequence: 5, index: '属性5', extColumn: 'ext5', name: '', required: false, showed: true,
          defaultValue: '', dataType: '', dataValue: '', validateRule: '', status: true, show: '' }
      ]
    }
  },
  created() {
    findByDictionaryType('assetExtFieldConfigDataType').then(response => {
      this.dataTypes = response.data
    })

    this.getList()
  },
  methods: {
    save(rowData) {
      if (rowData.dataType === 'dropdowntree' || rowData.dataType === 'richtext' ||
       rowData.dataType === 'appendix') {
        this.$message({
          showClose: true,
          message: '当前数据类型建设中,敬请期待！',
          type: 'warning'
        })
        return
      }

      if (rowData.name === null || rowData.name === '') {
        this.$message({
          showClose: true,
          message: '名称不能为空！',
          type: 'warning'
        })
        return
      }

      if (rowData.dataType === null || rowData.dataType === '') {
        this.$message({
          showClose: true,
          message: '数据类型不能为空！',
          type: 'warning'
        })
        return
      }

      if (rowData.dataType === 'droplist' || rowData.dataType === 'multipledropdown') {
        if (rowData.dataValue === '' || rowData.dataValue === null) {
          this.$message({
            showClose: true,
            message: '所选数据类型下数据值域不能为空！',
            type: 'warning'
          })
          return
        }
      }

      if (rowData.id !== null) {
        update(rowData.id, rowData).then(response => {
          if (response === false) return
          this.$message({
            showClose: true,
            message: '操作成功！',
            type: 'success'
          })

          this.getList()
        })
      } else {
        create(rowData).then(response => {
          if (response === false) return
          this.$message({
            showClose: true,
            message: '操作成功！',
            type: 'success'
          })

          this.getList()
        })
      }
    },
    getList() {
      list().then(response => {
        this.datas = response.data
        this.datas.forEach(data => {
          this.tabledatas.forEach(item => {
            if (data.extColumn === item.extColumn) {
              Object.assign(item, data)
            }
          })
        })

        // this.tabledatas = Object.assign(this.tabledatas, this.datas)
        this.itemkey = Math.random()
      })
    }
  }
}
</script>

